Cuando recuerdo los cambios de imagen del blog vienen a mi mente la cantidad de cosas que se van aprendiendo con el paso del tiempo, incluso me hace gracia comparar aquella plantilla clásica con un logo creado por mi y unas etiquetas creadas manualmente para las que era necesario tener dos blogs.
Poco más, porque siempre intento no recargar aunque luego quede sólo en el propósito, yo lo veía fantástico, con mil tropiezos pero creado por mi.
Sigo teniendo la sensación que he perdido cosas en el camino, siento no haber descubierto todo mucho antes pero las cosas hay que hacerlas pasito a pasito cuando se quiere, se puede y se sabe que están ahí, es la única forma de exprimirlas y saborearlas.
Tres años después todo ha cambiado, lo único que conservo es la ilusión y la impaciencia porque llegue la hora para reunirme con ese amante silencioso, siempre a la espera, algunas veces incomprensible pero siempre fiel.
Sin mediar palabras nos entendemos divinamente, pero como todo amor también tiene días bajos que son suplidos después cuando pulsamos el botón naranja de GUARDAR PLANTILLA y voilá!
Es amor por aquello que hacemos y nos gusta. Es, otra clase de amor... pero que también engancha.
Teclado de Microsoft que interpreta las emociones |
|
▼ |
El otro día leí que Microsoft presentará en Octubre un teclado capaz de interpretar las emociones y que expertos en el tema aseguran un gran futuro para esta tecnología aplicada a los videojuegos
Dicen que reconoce hasta 256 niveles de impulsos, la sensibilidad del teclado permitirá escribir con mayúsculas si pulsamos las teclas con más fuerza de lo normal, así como borrar una palabra pulsando (siempre con más ímpetu de lo normal) la tecla suprimir.
No está mal si se trata de aplicarlo a los videojuegos pero imaginad que estamos escribiendo en nuestro blog, nos enfadamos porque la conexión es más lenta de lo que suele ser normalmente,¿Escribiríamos todo en mayúsculas?
La rapidez también influye ¿Habéis notado que a más rapidez tecleamos con más ímpetu?
Si interpreta las emociones ¿De qué forma interpretará el teclado inteligente ese estado de enamoramiento que hace ver todo color de rosa? ¿Mostrará puntos suspensivos?
¿La pereza serán espacios?
Debe ser una maravilla pero sigo pensado que puede resultar una incomodidad controlar la fuerza al pulsar las teclas, menos mal que podemos usar la tecla borrar o imprimir porque de lo contrario menudo culebrón mostrarse tal cual nos sentimos.
Esto va para mi familia y almas generosas que saben que mi teclado está pidiendo a gritos ser renovado: "No quiero teclados de última generación, ni ergonómicos, ni inalámbricos, ni con membrana para amortiguar el ruido, ni mucho menos que interprete mis emociones. Prefiero ese horroroso con cable que hace ruido al escribir, ese que nunca te deja tirado porque se terminan las pilas y que marque justamente las teclas que yo quiero pulsar"
No es porque sea de Microsoft es que una es así de rara.
Menú personalizado desde "Fuentes y colores" |
|
▼ |
Hay diferentes formas de añadir un menú en el header, claro está que no vamos a hablar de todas sino de una en concreto que Gabuleta lleva tiempo esperando.
Con la siguiente explicación conseguiremos un menú en el header y aunque a simple vista pueda parecer complicado es justamente todo lo contrario, lo que hace es simplificar el menú de forma que podemos cambiar los colores con la herramienta "Fuentes y colores"
Lo primero que haremos será eliminar la barra de navegación que nos provee Blogger más conocida como Navbar.
Buscamos ]]></b:skin> y justo antes añadimos lo siguiente.#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
Ahora que no tenemos barra de navegación, justo después del código anterior añadimos los estilos del menú:
.menu {
width:660px;
height:27px;
background: $menubgColor;
border: 1px solid $menumainBorderColor;
}
.menu ul{
padding:5px 0 0 10px;
margin:0px;
float:right;
list-style:none;
border-right: 1px solid $menuBorderColor;
}
.menu li{
padding:0px;
margin:0px;
float:left;
list-style:none;
line-height:32px;
}
.menu a{
float:left;
display:block;
padding:0 15px 0 15px;
color: $menuTextColor;
font: $menuTextFont;
border-left: 1px solid $menuBorderColor;
}
.menu a:hover{
color: $menuHoverTextColor;
background: $menuHoverBgColor;
}
Con width escogemos el ancho normalmente el mismo ancho que tenemos en outer-wrapper y con height le damos altura.
Si deseamos añadir una imagen de fondo en lugar de color simplemente eliminamos la línea background: $menubgColor;
y en su lugar añadimos:
background: url('url imagen');(No intentes guardar los cambios ahora)
Como podéis ver en los estilos del menú los colores no fueron definidos con css, sino que añadimos una línea de código para que las variables hagan su función desde la herramienta fuentes y colores. Para que esas variables funcionen y poder guardar los cambios primero debemos añadirlas.
Al inicio de la plantilla veremos algo así:Justo después de:
/* Variable definitions
====================
Añadimos las nuevas variables para el menú:<Variable name="menubgColor" description="Color de Fondo"
type="color" default="#C94093" value="#940f04">
<Variable name="menumainBorderColor" description="Color del borde"
type="color" default="#C94093" value="#000000">
<Variable name="menuBorderColor" description="Líneas de separación"
type="color" default="#9D1961" value="#000000">
<Variable name="menuTextColor" description="Color texto"
type="color" default="#ffffff" value="#cccccc">
<Variable name="menuHoverBgColor" description="Color de fondo Hover"
type="color" default="#ffffff" value="#15222b">
<Variable name="menuHoverTextColor" description="Color texto Hover"
type="color" default="#9D1961" value="#ffffff">
<Variable name="menuTextFont" description="Tipo de fuente"
type="font"default="normal normal 77% Verdana, sans-serif" value="normal bold 95% Georgia, Times, serif">
Ahora si que podemos guardar los cambios, las variables de este ejemplo las he probado sin problemas pero si diera algún error del tipo "Declaración de variable no válida en máscara de página" comprobaremos de qué variable se trata y miraremos si al copiar y pegar no cometimos algún error.
Seguimos con nuestro menú, ya sólo queda añadir los enlaces, buscamos nuevamente en la plantilla:
<div id="header-wrapper">
y justo antes añadimos:
<div class="menu">
<ul>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
</ul>
</div>
Una vez guardados los cambios y añadidos nuestros enlaces en plantilla de diseño veremos el menú más o menos así:
Ya podemos comprobar si los enlaces están correctos.
Para enlazar diferentes páginas como puede ser el correo, acceso al panel de Blogger o sitios externos puedes ver como hacerlo en Configurar menús.
Para añadir traductor y buscador a este menú mira la siguiente entrada.
Gracias por la paciencia Gabuleta
Creando capturas |
|
▼ |
Dicen que una imagen vale más que mil palabras y en ocasiones es cierto.Una prueba de ello son los tutoriales presentados con imágenes, resulta más sencillo entender algo a la vez que se hace más ameno.
Las imágenes de los tutoriales suelen ser capturas mostradas de forma ordenada siguiendo las explicaciones, un tutorial con capturas resulta bastante más laborioso sin embargo el resultado es más satisfactorio.
En ocasiones queremos mostrar algo que nos ha llamado la atención, o nos da la sensación que al expresarnos nuestro interlocutor no termina de entendernos, no digo que no seamos claros, pero... ¿han pensado que con una captura no serían necesarias tantas palabras? y lo que es mejor, se captaría de inmediato aquello que tratamos de explicar.
Si, ya sé que todos andamos justos de tiempo ¡yo también! pero podemos intentarlo, dejemos atrás la pereza, quizás no salga una obra de arte pero tampoco es necesario.
Capturar una imagen de lo que vemos en pantalla es tan sencillo como presionar "Imprimir pantalla" (en algunos teclados "Impr Pant" )
Podemos realizar dos clases de capturas: De pantalla completa o sólo la ventana activa.Para realizar una captura de ventana activa presionamos ALT+Imprimir pantalla
Si presionamos la tecla Impr Pant realizamos una captura de pantalla completa.
Al utilizar capturas puede que nos veamos en la necesidad de resaltar algo, modificar el tamaño, recortar... con cualquier programa online podemos hacerlo, si utilizamos Windows disponemos del Paint, es muy básico pero nos puede sacar de más de un apuro.
Dependiendo el sistema podemos localizarlo en Inicio/Programas/Accesorios y a continuación Paint una vez lo abrimos hacemos click en Edición y luego en Pegar, nos aparecerá la última captura.
En Edición / Pegar muestra la última captura
Podemos cortar, pintar, añadir texto, modificar tamaño... herramientas muy sencillas y suficientes para comenzar.
En los comentarios Kenneth Jack aporta otra sugerencia, se trata de capturar las imágenes sin el borde superior/inferior que añade marcadores, hora, barra de navegación...
Presionamos la tecla F11 y nos mostrará la pantalla completa. De esa forma ya podemos hacer la captura y nos la mostrará tal y como la vemos en ese momento.
Eulalia también ha comentado para proporcionar un enlace a su blog donde entre otras cosas habla de Paint como aprovecharlo
Eulalia también ha comentado para proporcionar un enlace a su blog donde entre otras cosas habla de Paint como aprovecharlo
A partir de ahí todo es cuestión de aprender jugando porque en realidad es como mejor se aprende, si nos queda alguna duda podemos resolverla haciendo click en Ayuda donde encontraremos una descripción de cada herramienta y forma de utilizarla.
Sencillo ¿verdad? ahora nadie tiene excusa para decir que no sabe realizar una captura.
La caché de Google |
|
▼ |
Algunas veces llegan comentarios como "Ha desaparecido esto o aquello de mi blog sin hacer ningún cambio" es poco probable que algo desaparezca por arte de magia pero aún así lo que hacemos es ir rápidamente a Google y buscar el blog en cuestión.
Nuestra prisa no es otra que intentar rescatar la caché que Google guarda sobre nuestro blog.¿Y qué es eso de la caché? Ni más ni menos que una captura que Google conserva de su último rastreo, la prisa es por conseguir rescatar la mayor información posible porque de no llegar a tiempo la copia que veremos será del blog ya actualizado con los últimos problemas o errores.
Algunos blogs tardan más que otros en ser rastreados, pueden tardar de horas a días incluso que no sean rastreados al no estar indexados
Supongamos que mi blog ya está indexado y aparece en Google, lo busco con el título y me mostraría algo así:
Si accedemos "En caché" veremos nuestro blog tal y como lo guarda Google y nos indicará cuando fue la fecha de esa captura. Veremos también marcadas las palabras que añadimos en el buscador que nos facilitará la localización de esas palabras en el blog
¿Qué hacemos ahora? suponíamos que habíamos añadido algo y ha desaparecido, buscaremos en el código fuente del blog y con un poco de suerte podemos rescatar algunas cosas como por ejemplo los estilos, aquello que añadimos entre <b:skin> y ]]></b:skin>
También podemos buscar en el resto del blog, pero tened en cuenta que todo lo que añadimos cuando marcamos para expandir la plantilla no puede visualizarse en el código fuente.
El código lo veremos según el navegador que estamos usando, algunas formas de localizar el código fuente son:
- Haciendo un click en el botón derecho sobre la página donde seleccionaremos "View Page Source"
- En la barra de herramientas en Ver seleccionando "Código fuente de la página"
Lo mejor de todo es tener siempre una copia de la plantilla incluso también del blog, pero como es lógico no hacemos una copia cada vez que realizamos un cambio y buscar en la caché de Google es útil en caso de "emergencia"
Problemas al arrastrar los gadgets de la sidebar |
|
▼ |
Hay un problema que se da con frecuencia en los gadgets de la sidebar y es la imposibilidad de arrastar los gadgets desde plantilla de diseño, ese problema puede solucionarse manualmente en plantilla Edición HTML.
Nos situamos en <div id='sidebar-wrapper'> veremos algo así:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'/>
(más wibget)
--------------
--------------
--------------
(más wibget)
--------------
--------------
--------------
</b:section>
</div>
Cada widget es un elemento añadido y aparece en el orden que lo añadimos, cuando en plantilla de diseño los arrastramos y guardamos los cambios ese cambio también se produce en Plantilla de Edición de HTML. ¿Qué hacemos entonces si no podemos arrastrarlo? pues como dice el refrán si la montaña no va a Mahoma, Mahoma va a la montaña.
Copiamos la línea del widget que deseamos cambiar y la pegamos en el orden que deseamos tenerla.<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>
</b:section>
</div>
Ya sé que es molesto hacer esto cada vez pero por suerte el problema no dura eternamente y suele solucionarse solo.
PicTreat - mejora fotografías online |
|
▼ |
PicTreat es una herramienta online al estilo de Makeup Pho.to podemos subir imágenes desde Flickr, MySpace, Facebook, Photobucket o la url si previamente alojamos la imagen en algún sitio.
Conseguimos con ello que en nuestras fotografías se muestre una piel más suave y brillante, eliminar efectos que irriten la piel, ojos rojos y corregir colores.
No es necesario registro y en pocos minutos conseguimos una imagen distinta y mejorada.Visto en « Punto Geek »
Chuleta o Cheat Sheet de Blogger |
|
▼ |
Hace unos días Francisco de Blog and Web me mostraba algo que sin lugar a dudas vamos a utilizar en más de una ocasión, se trata de una chuleta o Cheat Sheet de Blogger gracias a ella tendremos ayuda extra cuando intentemos modificar nuestra plantilla.
Lo mejor de todo es que con esa chuleta aprenderemos a conocer y movernos mejor por nuestra plantilla.Descarga
Blogger Cheat Sheet (PDF) / Ver en líneaImagen png – 1 , 2
(Imágenes y descargas obtenidas de Blog and Web)
¿Para qué sirve? como Francisco bien explica sirve para:
- Modificar elementos de una plantilla existente.
- Adaptar un diseño de otra plataforma.
- Crear un diseño nuevo para Blogger.
¿Cómo hacemos para realizar algunas modificaciones?
Buscamos la clase o id en la chuleta de la parte que deseamos modificar y cambiar los atributos en el CSS de la plantilla.
El ejemplo que Francisco pone para modificar el color del título de blog.
Buscamos en la chuleta, la clase correspondiente al título del blog que sería h1.title, se busca la clase en el código CSS de la plantilla, si existe se modifica el código de color y sino, se agrega la nueva clase:
h1.title {
color:#000;
/* otros atributos */
}
Otro ejemplo para buscar la fecha de publicación del post, en la chuleta veríamos que viene definido con .date-header si buscamos en nuestra plantilla veremos esa clase y desde ahí podemos modificarla:
h2.date-header {
margin:1.5em 0 .5em;
}
Para orientarnos mejor la chuleta viene acompañada de una imagen
Si en tus aspiraciones está Adaptar un diseño de otra plataforma la chuleta sirve para encontrar el equivalente en blogger de cada elemento.
Ejemplo: En un theme WordPress el título de los post tiene un clase llamada .tit, se copia la clase y los atributos y se renombra en blogger como: .post-title que sería la clase de título en los post.
Naturalmente adaptar una plantilla no es tan sencillo como parece, es necesario familiarizarse y tener unos conocimientos básicos de CSS porque no siempre hay equivalentes y hay que modificar también la estructura.
Podemos utilizarla para crear un nuevo diseño
A partir de la chuleta se puede crear un estructura CSS y HTML que sirva para diseñar sin estar desde Blogger, o bien, solo la estructura CSS y trabajar en linea.
Ayuda y correcciones
La chuleta es básica y precisamente por ello creo que puede ser muy útil para mucha gente, si crees lo mismo, agradecemos si nos ayudas a difundirla, en tu blog, bitacoras.com o meneame. Y si tienes correcciones o una opinión te agradecemos el comentario.
Mejor vídeo del año |
|
▼ |
Son esponjitas que absorben todo lo que ven y escuchan, los mejores imitadores del mundo.
Hoy son escenas irreales que mañana pueden convertirse en reales.
Aportación de:« Kirei »
Background JQuery |
|
▼ |
Hace unas semanas en Pizcos Blogs vi un efecto de Background muy llamativo, está creado con JQuery y el autor es You Love Us.
Como bien señala Pizcos lo principal es entender la forma de añadir la imagen considerando que el tamaño (ancho) de la imagen debe ser igual a nuestro blog es decir debe tener la misma medida ancho) el largo no es tan importante aunque debemos considerar que debe tener más altura que nuestro header de lo contrario el efecto pierde su encanto.
Buscaremos una imagen que mida lo mismo de ancho, en las páginas de Wallpapers encontraremos un gran surtido que podemos adecuar de tamaño con algún editor de imágenes.
El siguiente paso que nos recomienda Pizcos sería añadir a la plantilla la librería JQuery y copiar el plugin en el bloc de notas que lo guardaremos como jquery.backgroundPosition.js o jquery.backgroundPosition.txt. para subirlo más tarde a un alojamiento y añadirlos en la plantilla justo antes de </body>
Ahora bien, yo he optado por mostrar la imagen únicamente en el header(cabecera) de nuestro blog, para ello la imagen debe medir de ancho lo mismo que nuestra cabecera "header-wrapper" y añadir todo el código en la plantilla para evitar así alojamientos externos.
¿Vemos cómo hacerlo?
He añadido justo antes de </head> lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(function() {
var backgroundheight = 750;
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 60 / 24 * 100;
var percentofday = hourpercent + minutepercent;
var startoffset = backgroundheight / 100 * percentofday;
var endoffset = startoffset + backgroundheight;
function scrollbackground() {
$('body').css({
backgroundPosition: '50% -' + startoffset + 'px'
});
$('body').animate({
backgroundPosition:'(50% ' + endoffset + 'px)'
},
100000,
"linear",
function () {
scrollbackground();
}
);
}
scrollbackground();
}
);
</script>
Como veréis he marcado en color rojo el ancho de la imagen que mide 750px × 600px y es el mismo ancho de header-wrapper.
Nos queda añadir la imagen, buscamos los estilos de body y la añadimos de la siguiente forma:
background: #000 url(url-de-la-imagen) repeat-y;
- El color negro ( #000) es el color que se muestra al cargar la página.
- Con repeat-y estamos diciendo que la imagen se repita en vertical.
- Si deseamos dar más altura a la cabecera para que la imagen quede más vistosa añadimos height: 220px; o una cantidad similar en header-wrapper.
Iconfinder más de 100.000 iconos |
|
▼ |
Bigariato me manda un enlace de una galería de iconos con más de 100.000 iconos, esa galería pertenece al buscador de iconos Iconfinder
Gracias a esa galería podemos visualizar los iconos sin necesidad de hacer uso del buscador.